<template>
  <div class="login-bos">
    <div class="layout_head">
      <img class="nlogo13700" src="../../assets/nlogo13700.png" alt="" />
      <div class="head">
        <div>“多合一”登录</div>
        <div style="margin: 0 15px">English</div>
        <div>返回首页</div>
      </div>
    </div>
    <div class="login-box bg-cover">
      <div v-if="type == 1" class="box bg-cover">
        <el-form
          ref="ruleFormRef"
          class="demo-ruleForm"
          :model="ruleForm"
          :rules="rules"
          :label-width="10"
          size="large"
        >
          <el-form-item prop="text1">
            <el-input
              v-model="ruleForm.text1"
              style="width: 417px"
              class="input_box1"
              placeholder="统一社会信用代码/纳税人识别号"
            >
              <template #prefix>
                <img class="input_icon" src="../../assets/login/icon1.png" alt="" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="text2">
            <el-input
              v-model="ruleForm.text2"
              placeholder="居民身份证号码/手机号码/用户名"
              style="width: 417px"
            >
              <template #prefix>
                <img class="input_icon" src="../../assets/login/icon2.png" alt="" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="text3">
            <el-input
              v-model="ruleForm.text3"
              placeholder="个人用户密码"
              style="width: 417px"
              type="password"
              show-password
            >
              <template #prefix>
                <img class="input_icon" src="../../assets/login/icon3.png" alt="" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <slideVerify />
          </el-form-item>
          <el-form-item>
            <el-button
              round
              style="width: 417px"
              type="primary"
              @click.prevent="submitForm(ruleFormRef)"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-else class="login-code">
        <div class="go-back" @click="goBack">
          <el-icon><ArrowLeft /></el-icon>
          <div style="margin-left: 4px">返回</div>
        </div>
        <div class="title">企业登录</div>
        <div class="login-nav">
          <div class="nav1">
            <div>短信验证</div>
            <div class="nav_border" />
          </div>
          <div class="nav2">电子税务局APP扫码</div>
          <div class="nav2">个人所得税APP扫码</div>
        </div>
        <div class="demo-ruleForm1">
          <el-form
            ref="ruleFormRef1"
            size="large"
            :model="ruleForm1"
            :rules="rules1"
            :label-width="10"
          >
            <el-form-item prop="text1">
              <el-input
                v-model="ruleForm1.text1"
                style="width: 418px"
                class="input_box1"
                placeholder="请输入"
                readonly
              >
                <template #prefix>
                  <img class="input_icon" src="../../assets/login/icon5.png" alt="" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="text2" style="margin-top: 50px">
              <el-input
                v-model="ruleForm1.text2"
                style="width: 308px"
                class="el_input_code"
                placeholder="请输入短信验证码"
              >
                <template #prefix>
                  <img class="input_icon" src="../../assets/login/icon6.png" alt="" />
                </template>
              </el-input>
              <div class="input-code" @click="countdown">
                {{ codeText }}
              </div>
            </el-form-item>
            <el-form-item style="margin-top: 50px">
              <el-button
                :loading="loading"
                round
                style="width: 418px"
                type="primary"
                @click.prevent="submitForm1(ruleFormRef1)"
              >
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <div class="login_foot">
      <img class="foot_icon" src="../../assets/login/icon4.png" alt="" />
      <div class="foot_bos">
        <div class="foot_box">
          <span>版权所有：国家税务总局</span>
          <span>链接：用户指南 | 常见问题</span>
          <span>服务热线：12366</span>
        </div>
        <div>建议您使用IE10及以上版本、Edge、Chrome、Firefox和360等主流浏览器浏览本网站</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { FormRules, FormInstance, ElTree } from "element-plus";
import { Message, Iphone, Lock } from "@element-plus/icons-vue";
import slideVerify from "./slideVerify.vue";
import router from "@/router";
import Http from "@/utils/api";

const type = ref<any>(1);
const ruleForm = reactive<any>({});
const ruleFormRef = ref<FormInstance>();

const ruleForm1 = reactive<any>({});
const ruleFormRef1 = ref<FormInstance>();
const codeText = ref<any>("获取验证码");
const codeTime = ref<any>(120);
const codeType = ref<any>(true);
const interval = ref<any>(null);
const loading = ref(false);

const rules = reactive<FormRules<any>>({
  text1: [{ required: true, message: "请输入统一社会信用代码/纳税人识别号", trigger: "blur" }],
  text2: [{ required: true, message: "请输入居民身份证号码/手机号码/用户名", trigger: "blur" }],
  text3: [{ required: true, message: "请输入个人用户密码", trigger: "blur" }],
});

const rules1 = reactive<FormRules<any>>({
  text2: [
    { required: true, message: "请输入短信验证码", trigger: "blur" },
    { min: 6, max: 6, message: "请输入正确的6位验证码", trigger: "blur" },
  ],
});

//保存
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      ruleForm1.text1 = onPhone(ruleForm.text2);
      ruleForm1.text2 = "";
      codeText.value = "获取验证码";
      codeType.value = true;
      type.value = 2;
    }
  });
};

function countdown() {
  if (codeType.value) {
    ElMessage({
      message: "<div style='color:#000000'>短信验证码成功发送到" + ruleForm1.text1 + "</div>",
      dangerouslyUseHTMLString: true,
      type: "success",
      plain: true,
    });
    codeType.value = false;
    interval.value = setInterval(function () {
      codeTime.value--;
      codeText.value = codeTime.value + "S";
      if (codeTime.value == 0) {
        codeText.value = "获取验证码";
        codeTime.value = 120;
        clearInterval(interval.value);
        interval.value = null;
        codeType.value = true;
      }
    }, 1000);
  }
}

function onPhone(res: any) {
  var tel = res ? res : "";
  tel = "" + tel;
  var ary = tel.split("");
  ary.splice(3, 4, "****");
  var newTel = ary.join("");
  return newTel;
}

function goBack() {
  type.value = 1;
}

//保存
const submitForm1 = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true;
      Http.Post("login", {
        taxpayer_number: ruleForm.text1,
        account: ruleForm.text2,
        password: ruleForm.text3,
      }).then((res: any) => {
        loading.value = false;
        if (res.code == 1) {
          localStorage.setItem("userInfo", JSON.stringify(res.data.userinfo));
          localStorage.setItem("TOKEN_KEY", res.data.userinfo.token);
          router.push("/index");
        } else {
          ElMessage.error(res.msg || "系统出错");
        }
      });
    }
  });
};
onMounted(() => {});

// 组件卸载时停止倒计时并清除定时器
onUnmounted(() => {
  clearInterval(interval.value);
  interval.value = null;
});
</script>

<style lang="scss" scoped>
.login-bos {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 1300px;
  height: 100%;

  .layout_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 56px;
    padding: 0 24px;
    background-color: #4285f4;

    .nlogo13700 {
      height: 43px;
    }

    .head {
      display: flex;
      align-items: center;
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      cursor: pointer;
    }
  }

  .login-box {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-image: url("../../assets/login/login4.png");

    .box {
      position: relative;
      width: 852px;
      height: 571px;
      background-image: url("../../assets/login/login3.png");

      .demo-ruleForm {
        position: absolute;
        top: 100px;
        left: 390px;
      }
    }
  }

  .login-code {
    width: 674px;
    height: 556px;
    padding: 26px 23px 58px;
    background-color: #fff;

    .go-back {
      display: flex;
      align-items: center;
      font-size: 16px;
      color: #666;
      cursor: pointer;
    }

    .title {
      width: 100%;
      margin-bottom: 16px;
      font-size: 20px;
      font-weight: bold;
      color: #333;
      text-align: center;
    }

    .login-nav {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 32px;
      font-size: 16px;
      font-weight: 700;

      .nav1 {
        position: relative;
        color: #333;

        .nav_border {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 4px;
          background: #4285f4;
          border-radius: 2px;
        }
      }

      .nav2 {
        color: #999;
        cursor: pointer;
      }
    }

    .demo-ruleForm1 {
      display: flex;
      justify-content: center;
      width: 100%;
      padding-top: 70px;

      .input-code {
        width: 110px;
        height: 40px;
        font-size: 14px;
        line-height: 40px;
        color: #fff;
        text-align: center;
        cursor: pointer;
        background: #4285f4;
      }
    }
  }

  .login_foot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 140px;
    background: #1e2631;

    .foot_icon {
      width: 54px;
      height: 68px;
    }

    .foot_bos {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 68px;
      padding: 6px 0 6px 25px;
      font-size: 14px;
      color: #7d8084;

      .foot_box {
        display: flex;
        justify-content: space-between;
        width: 528px;
      }
    }
  }

  .input_icon {
    width: 22px;
    height: 22px;
  }

  :deep(.el-input__inner) {
    color: #444;
  }

  :deep(.el-input__wrapper) {
    border-radius: 0 !important;
  }

  :deep(.el-button) {
    border-radius: 5px !important;
  }
}

// #dcdfe6
</style>
